/**
 * 学习目标：JSX-插值表达式的基本使用 - 引用数据类型
 * 表达式
 * 1. 变量?
 * 2. 基本数据类型: number string
 * 3. 引用数据类型:  object  array /function
 * 4. 其它类型: 三元表达式 逻辑且 JSX本身
 *
 */
import React from 'react';
import ReactDOM from 'react-dom';
const person = {
  name: 'zs',
  age: 18,
  type: 'div',
  children: {
    name: 'xzs',
    age: 3,
  },
};

const list = [1, 2, 3];
const list2 = [<span>1</span>, <span>2</span>, <span>3</span>];

function hello() {
  return {
    name: 'zs',
  };
}

const divNode = (
  <div>
    {/*  💥 1. JSX插值表达式中不能使用对象, 否则报错 */}
    {/*❌ <h1>{person}</h1> */}
    <h1>{person.name}</h1>
    <h1>{person.age}</h1>
    {/* 💥 2. 数组的每项元素, 会当做一个个dom节点直接渲染出来 */}
    <h2>{list}</h2>
    <h2>123</h2>
    <h3>{list2}</h3>
    {/* 💥3. 函数: 函数本身不可以放在{}中, 函数的调用往往可以 */}
    <h4>{hello()}</h4>
    {/* ❌ <h4>{hello}</h4> */}
  </div>
);

ReactDOM.render(divNode, document.getElementById('root'));
